<template>
	<view class="article_item grey_border">

		 <!-- 发帖人信息 -->
		 <view @click="gotoArticle()">
			<poster-info :data="data" :show-follow-btn="showFollow" :disable-to-home="disableToHome"></poster-info>
		 </view>
	

		<!-- 内容 -->
		<view @click="gotoArticle()">
			<!-- <text class="article_topic">#你喜欢那个明显#</text> -->

			<text-overflow class="text_content" :dt="data.content"></text-overflow>

			<!-- 图片、视频 -->
			<file-list :dataList="data.fileList" @video_play="videoPlayBack"
						:inner-paly-video="innerPalyVideo">
			</file-list>
		</view>


		<!-- 话题 -->
		<view class="topic_box" v-if="showTopic" @click="gotoArticle()">
			<topic-name-btn :topic-info="data.topicInfo" ></topic-name-btn>
		</view>


		<!-- 底部的点赞、评论、分享 -->
		<footer-info :data="data" @replyEvent="gotoArticle()"></footer-info>


	</view>
</template>

<script>
	import TextOverflow from "@/components/textOverflow.vue";
	import PosterInfo from "@/components/article/posterInfo.vue";
	import FooterInfo from "@/components/article/footerInfo.vue";
	import FileList from "@/components/file/fileList.vue";
	import TopicNameBtn from "@/components/topic/topicNameBtn.vue";
	export default {
		name: "listContent",
		props: {
			// 数据对象
			data: {
				type: Object,
				default () {
					return {
						id: '',
						createdDate: '',
						content: '',
						fileList: [],
						topicInfo: {},
						poster: {}
					}
				}
			},
			// 是否展示话题信息
			showTopic:{
				type: Boolean,
				default(){
					return true
				}
			},
			// 是否展示关注按钮
			showFollow:{
				type: Boolean,
				default(){
					return true
				}
			},
			// 是否禁止前往主页
			disableToHome:{
				type: Boolean,
				default(){
					return false
				}
			},
			// 组件内部播放视频
			innerPalyVideo: {
			    type: Boolean,
			    default: false
			},
		},
		components:{
			TextOverflow,
			PosterInfo,
			FooterInfo,
			FileList,
			TopicNameBtn
		},
		data() {
			return {
				// calc((100% - 4px) / 3);
			}
		},
		methods: {
			// 前往详情
			gotoArticle(){
				uni.navigateTo({
					url: '/pages/article/article?id='+this.data.id
				})
			},
			// 视频播放
			videoPlayBack(url){
				this.$emit('video_play',url)
			}

		}
	}
</script>

<style scoped lang="scss">
	.topic_box{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 8px;
		margin-bottom: 5px;
	}
	.text_content{
		word-break: break-all;
		word-wrap: break-word;
		white-space: pre-wrap;
	}
</style>
